<template>
  <basic-dialog :visible="show"
                title="工单转序"
                min-width="900px"
                :isShowInnerLoading = 'loading'>
    <q-form @submit="submit" class="dialog-content" greedy>
      <div class="row scroll scrollbar" style="padding:0 10px; margin:20px 0 10px;max-height: 400px">
        <div class="col-3 text-ellipsis">
          产品：{{ form.materialNames }}
          <q-tooltip>{{ form.materialNames }}</q-tooltip>
        </div>
        <div class="col-3 text-ellipsis">
          工序名称：{{ form.processName }}
          <q-tooltip>{{ form.processName }}</q-tooltip>
        </div>
        <div class="col-3 text-ellipsis">
          加工设备：{{ form.deviceName ? form.deviceName : '--' }}
          <q-tooltip>{{ form.deviceName ? form.deviceName : '--' }}</q-tooltip>
        </div>
        <div class="col-3 text-ellipsis">
          作业人员：{{ form.operator ? form.operator : '--' }}
          <q-tooltip>{{ form.operator ? form.operator : '--' }}</q-tooltip>
        </div>
        <div class="col-3 text-ellipsis">
          派工数量：{{ form.jobCount || 0 }}
        </div>
        <div class="col-3 text-ellipsis">
          完工数量：{{ form.finishedCount || 0 }}
        </div>
        <div class="col-3 text-ellipsis">
          不良数量：{{ form.rejectionCount || 0 }}
        </div>
        <div class="col-12 text-ellipsis">
          <div class="flex">
            <div style="width: 70px">产品规格：</div>
            <div style="width: calc(100% - 70px)">
              <div v-for="(item, index) in form.productSpecs" :key="index" style="word-break: break-all;white-space: initial" >{{item.productStandard}}</div>
            </div>
          </div>
        </div>

      </div>
      <yz-input
        v-model="form.comments"
        inputType="textarea"
        :maxlength="100"
        style="padding: 0 20px"
        title="备注"
      />
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit"/>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'work-order-reverse',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      form: {
        comments: ''
      }
    }
  },

  methods: {
    // 编辑填充表格
    assignment (val) {
      this.form = val
      this.form.materialNames = _.join(this.form.materialNames, '、')
      this.form.comments = ''
      this.loading = false
    },
    hideLoading () {
      this.loading = false
    },
    // 提交表单
    submit () {
      this.loading = true
      this.$emit('submit', this.form)
    }
  }
}
</script>

<style scoped lang="stylus">
  .col-3, .col-12{
    padding 0 10px
    margin-bottom 10px
  }
  >>>.name{
    width auto !important
  }
  .product-specs{
    >>>.item {
      padding 0 !important
    }
  }
</style>
